<template>
  <div class="abnormal">
    <Button :type="orderId ? 'primary' : 'info'" :disabled="(!orderId && !workOrderCode) || workOrderState === 3 || !buttonAuth" @click="clickHandle">上报异常</Button>
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      destroy-on-close
      :append-to-body="true"
      title="上报异常"
      @open="openHandle"
      @close="resetHandle"
    >
      <div class="abnormal-content">
        <el-form
          ref="form"
          :model="formData"
          inline
          :rules="formRules"
          label-width="80px"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item prop="abnormalReceiver" label="坐席">
                <SearchSelectPicker
                  url="/call-center/api/v1/staffInfo/page"
                  placeholder="请输入坐席"
                  lable-name="staffName"
                  value-name="accountNo"
                  :params="{query:{deptNo: {value: '14', operator: '='}, state: {value: 1, operator: '='}}, type: 0}"
                  :value.sync="formData.abnormalReceiver"
                  :lable.sync="formData.abnormalReceiverName"
                ></SearchSelectPicker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <Button type="primary" :loading="submitLoading" @click="submitHandle">确定</Button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { reportAbnormal } from '@/api/workOrder'
export default {
  name: 'AbnormalReport',
  components: {
    Button,
    SearchSelectPicker
  },
  props: {
    orderId: {
      type: String,
      default: ''
    },
    workOrderState: {
      type: Number,
      default: 0
    },
    workOrderCode: {
      type: String,
      default: ''
    },
    carbonInfo: {
      type: Object,
      default: () => ({})
    },
    buttonAuth: {
      type: Boolean,
      default: false
    }, // 按钮是否可用
    enableOpen: {
      type: Function,
      default: () => Promise.resolve()
    }
  },
  data() {
    return {
      formData: {
        abnormalReceiver: '',
        abnormalReceiverName: ''
      },
      formRules: {
        id: [{ required: true, message: '请选择坐席', trigger: 'change' }]
      },
      visible: false,
      staffInfoArr: [],
      submitLoading: false
    }
  },
  methods: {
    /**
     * 打开Model时执行
     */
    openHandle() {
    },
    clickHandle() {
      this.enableOpen().then(() => {
        this.visible = true
      })
    },
    // 查询坐席
    submitHandle() {
      this.$refs.form.validate().then(() => {
        // FIXME: 坐席
        this.assistance(this.formData)
      })
    },
    // 确定协助
    assistance() {
      if (!this.formData.abnormalReceiver) {
        this.$message({
          message: '坐席不能为空',
          type: 'warning'
        })
        return
      }
      const h = this.$createElement
      this.$msgbox({
        title: '协助',
        showCancelButton: true,
        type: 'warning',
        message: h('div', [
          h('span', '确定需要坐席'),
          h('span', { style: { color: 'red' }}, this.formData.value),
          h('span', '协助处理此工单？')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // FIXME:发起请求
        if (!this.workOrderCode) return
        const params = {
          id: this.orderId,
          abnormalReceiver: this.formData.abnormalReceiver,
          abnormalReceiverName: this.formData.abnormalReceiverName,
          workOrderCode: this.workOrderCode
        }
        this.submitLoading = true
        return reportAbnormal(params).then(res => {
          if (res.success === 1) {
            this.$message({
              message: '异常上报成功',
              type: 'success'
            })
            this.$emit('on-success', true)
            this.visible = false
          }
        }).finally(() => { this.submitLoading = false })
      })
    },
    // 重置
    resetHandle() {
      this.$refs.form.resetFields()
      this.$set(this.formData, 'value', '')
    }
  }
}
</script>
<style lang="scss" scoped>
.abnormal {
  display: inline-block;
  .content {
    margin: 0 -10px;
  }
}
.abnormal-content /deep/ .el-row .el-form-item {
  width: 100%;
}
.abnormal-content /deep/ .el-row .el-form-item .el-form-item__content {
  width: 80%;
}
.abnormal-content /deep/ .el-row .el-form-item .el-form-item__content .el-autocomplete {
  width: 80%;
}
</style>
